<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/admin/assets/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <style type="text/css">
        .control-label {
            margin-top: 10px;
        }

        .row {
            margin: 0%;
        }

        #bar-show {
            margin-top: 21px;
            width: 100%;
            height: 530px;
            /*background-color: #0AA699*/
        }

        #bar-content {
            position: absolute;
            width: 96%;
            height: 74%;
            /*background-color: lightskyblue;*/
            margin: 40px 5px;
        }

    </style>

</head>

<body id="listbody">


<!-- ###############################代码编写处############################### -->

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <!--标题 通用-->
        <div th:replace="admin/common/html/title :: title(${title},${parenttitle},${isMsg},${msgHTML})">
        </div>
        <!-- 结束标题 通用-->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <div class="col-sm-12">
                    <!-- 搜索条件 -->

                    <div class="nest" id="inlineClose">
                        <div class="title-alt">
                            <h6>搜索条件</h6>
                            <div class="titleClose">
                                <a class="gone" href="#inlineClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#search_div">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-flow" id="search_div" style="display: block">
                            <div class="form_left">
                                <form role="form" class="form-group-sm" id="form-search">
                                    <div class="row">
                                        <div class="col-md-4 col-sm-3">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label ">年级：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" id="grade-select" name="grade">
                                                        <option value="2017">2017</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-3">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label ">考试科目：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control selectpicker" id="course-select"
                                                            name="courseName">
                                                        <option th:each="list : ${courseList}"
                                                                th:text="${list.courseName}"
                                                                th:value="${list.courseName}">First
                                                        </option>
                                                        <!--<option value="高等数学(1)">高等数学(1)</option>-->
                                                        <!--<option value="高等数学(2)">高等数学(2)</option>-->
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 col-sm-3">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">学院：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" id="college_select" name="cid">
                                                        <option th:each="list : ${collegeList}"
                                                                th:text="${list.collegeName}"
                                                                th:value="${list.collegeId}">First
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-3">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label ">专业：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" id="major_select" name="mid">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-3">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label ">班级：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" id="clazz_select" name="clid">

                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 col-sm-3">
                                        </div>


                                        <div class="col-md-4 col-sm-3">
                                        </div>
                                        <div class="col-md-4 col-sm-3">
                                            <button id="search" class="btn btn-success"
                                                    type="button"><i class="fa fa-search"></i>&nbsp;搜索
                                            </button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-12">
                                    <p>
                                        <strong class="control-label">注：</strong>
                                        1.学院的<u>平时成绩</u>，<u>期末成绩</u>以及<u>总评成绩</u>是学院内所有学生对某一科目的<strong>平均成绩</strong>。<br>
                                        &nbsp;&emsp;&emsp;2.学院成绩分级是以<strong>总评成绩</strong>为标准：<span class="small">优秀：90~100，良好：80~90，中等：70~80，及格：60~70，不及格：低于60</span>
                                    </p>

                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- END搜索条件 -->
                    <!-- 空白页开始-->
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>视图</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">
                            <div id="bar-show">
                                <div id="bar-content"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->
            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->
<!-- ###############################代码编写处end############################### -->


<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
<!-- 导出 -->
<script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/bootstrap-table-export.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/tableExport.js}" type="text/javascript"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<script type="text/javascript" src="../../../static/js/echarts/dist/echarts.min.js"></script>
<script th:src="@{/static/admin/assets/js/select2/js/select2.full.min.js}" type="text/javascript"></script>

<script>
    window.addEventListener("resize", function () {
        myEcharts.resize();
    });
</script>

<script type="text/javascript">


    $("#search").on("click", function () {
        window.addEventListener("resize", function() {
            myEcharts.resize();
        });

        var myEcharts = echarts.init(document.getElementById("bar-content"));
        //2, 指定图表的配置项和数据
        var option = {
            title: {
                text: '班级科目考试成绩统计占比',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:["成绩优秀人数","成绩良好人数","成绩中等人数","成绩及格人数","成绩不及格人数"]
            },
            series: [
                {
                    name: '成绩占比',
                    type: 'pie',
                    radius: '75%',
                    center: ['50%', '60%'],
                    data: [],
                    label: {show: true},
                    // 不显示连接线
                    labelLine: {show: true},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        $.ajax({
            //几个参数需要注意一下
            type: "get",//方法类型
            url: '/admin/saClazz/pie',
            data: $('#form-search').serialize(),
            dataType: 'json',
            success: function (data) {
                console.log(data);
                //给option赋值
                if (data.code == 200) {
                    option.series[0].data = data.seriesData;
                    // 使用刚指定的配置项和数据显示图表。
                    myEcharts.setOption(option);
                } else {
                    $.modal.alertError(data.msg)
                }
            }
        });
    })

    //城市查询
    function majorList() {
        $("#major_select").html("");
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: window.rootPath + "/admin/collegeLinked/getMajor?cid=" + $("#college_select").val(),
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#major_select").append("<option value='" + data[i].majorId + "'>" + data[i].majorName + "</option>");

                }
                $("#major_select").select2({
                    placeholder: "请选择"
                }).on("change", function (e) {
                    clazzList();
                })

            }
        })
    }

    //区县查询
    function clazzList() {
        $("#clazz_select").html("");
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: window.rootPath + "/admin/collegeLinked/getClazz?mid=" + $("#major_select").val(),
            success: function (data) {
                // $("#clazz_select").append("<option value='0'>全部班级</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#clazz_select").append("<option value='" + data[i].clazzId + "'>" + data[i].clazzName + "</option>");
                }
                $("#clazz_select").select2({
                    placeholder: "请选择"
                });
            }
        })
    }

    $(function () {
        $("#college_select").select2({
            placeholder: "请选择"
        }).on("change", function (e) {
            majorList();
        })
        $("#grade-select").select2({
            placeholder: "请选择"
        });
        $("#course-select").select2({
            placeholder: "请选择"
        });
    })
</script>

</body>


</html>
